<template>
	<view class="container">
		<form v-if="!isAwait" @submit="formSubmit">
			<view class="form">
				<view class="row b-b">
					<view class="title">形象照片</view>
					<view class="cont" @click="openUserInfo('形象照片','userIcon')">
						<image class="img" :src="form.userIcon || '/static/missing-face.png'"></image>
					</view>
					<text class="cell-more iconfont icon-you" @click="openUserInfo('形象照片','userIcon')"></text>
				</view>
				<view class="row b-b">
					<view class="title">展示称呼</view>
					<view class="cont">
						<input class="uni-input" v-model="form.nickName" placeholder="请输入称呼" :maxlength="6"  />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">性别</view>
					<view class="cont">
						<radio-group @change="radioChangeShopping" class="radio-group">
							<label class="cash-item" v-for="(item,index) in radioList" :key="index">
								<radio color="#007AFF"
								:value="item.value"
								:checked="form.gender == item.value"
								class="radio" />
								<text class="text">{{item.label}}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="row b-b">
					<view class="title">出生日期</view>
					<view class="cont">
						<picker mode="date" :value="form.birthday" @change="bindDateChange">
							<view class="input">
								<input
								:value="form.birthday"
								disabled="true"
								placeholder="请选择…" />
								<text class="cell-more iconfont icon-you"></text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row b-b">
					<text class="title">手机号</text>
					<text class="cont">{{userInfo.userName}}</text>
				</view>
			</view>
			
			<view class="form">
				<view class="row b-b">
					<view class="title">身份证姓名</view>
					<view class="cont">
						<input class="uni-input" v-model="form.realName" placeholder="请输入姓名" :maxlength="6"  />
					</view>
				</view>
				<view class="row b-b">
					<view class="title">身份证号</view>
					<view class="cont">
						<input class="uni-input" v-model="form.identificationCard" placeholder="请输入您的身份证号" :maxlength="18" />
					</view>
				</view>
				<view class="selectList" v-if="selectList.length">
					<view class="item" v-for="(item,index) in selectList" :key="index">
						<text class="name">{{item.typeName}}</text>
						<text class="iconfont icon-delete" @click="deleteHandler(index)"></text>
					</view>
				</view>
				<view class="upload-box" v-for="(item,index) in cardList" :key="index">
					<view class="title">{{item.title}}</view>
					<view class="uploadImg2">
						<view class="flex"><image class="card" :src="require(`./images/${item.icon}.png`)"></image></view>
						<view class="flex"><upload-images :length="1" :images="form[item.name]" @confirm="getImg($event,item.name)"></upload-images></view>
					</view>
				</view>
				<view class="row b-b">
					<view class="cont">
						<view class="tit">简介</view>
						<textarea v-model="form.profile" placeholder="个人简介" rows="6" :maxlength="200" />
					</view>
				</view>
			</view>
			<view class="fixed-bottom">
				<view class="b-card">
					<button class="add-btn no-border" form-type="submit">注册成为陪诊师</button>
				</view>
			</view>
		</form>
		<view v-if="isAwait==1" class="empty">
			<empty class="cont" tips="平台正在审核中，审核通过后将会以短信形式通知，请耐心等待…" src="empty/await">
				<view class="btn-link" @click="navTo('/pages/index/index')">去首页看看</view>
			</empty>
		</view>
		<view v-if="isAwait==2" class="empty">
			<empty class="cont" tips="审核通过，快去接单吧…" src="empty/success">
				<view class="btn-link" @click="navTo('/pages/index/index')">去接单</view>
			</empty>
		</view>
		<view v-if="isAwait==3" class="empty">
			<empty class="cont" tips="审核不通过，去看看原因吧…" src="empty/fail">
				<view class="btn-link" @click="openReason">去看看</view>
			</empty>
		</view>
		<!--弹窗-->
		<uni-pop type="confirm"
			v-model="popData.isShow"
			:title="popData.title"
      :showClose="true"
      class="pop-box"
    >
      <template slot="content">
				<view class="uploadImg">
					<upload-images :length="1" :images="userIcon" @confirm="getImgTx"></upload-images>
				</view>
      </template>
			<template slot="commit">
        <view class="btn-link btn-pop" @click="txConfirm">
          确定
        </view>
      </template>
    </uni-pop>
	</view>
</template>

<script>
	import uploadImages from "@/components/upload-images.vue"
	import { mapMutations, mapState } from 'vuex'
	export default {
		components:{
			uploadImages
		},
		data() {
			return {
				radioList:[{label:'男',value:1},{label:'女',value:0}],
				cardList:[
					{
						title:'身份证正面',
						name:'identificationFront',
						icon:'cardFront'
					},
					{
						title:'身份证反面',
						name:'identificationBehind',
						icon:'cardbei'
					}
				],
				form:{
					userIcon: '',
					realName:'',
					identificationCard:'',
					identificationFront:'',
					identificationBehind:'',
					profile:''
				},
				userIcon: '',
				isSelect:false,
				selectList:[],
				isAwait: 0,
				failureReason:'', // 拒绝原因
				popData:{}, // 弹窗信息
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.form.userIcon = this.userInfo.userIcon
			this.form.nickName = this.userInfo.nickName
			this.form.userName = this.userInfo.userName
			this.pageInit()
		},
		methods: {
			...mapMutations(['login']),
			txConfirm() {
				this.popData.isShow = false
				this.form.userIcon = this.userIcon
			},
			radioChangeShopping(event) {
				this.form.gender = event.detail.value
			},
			async pageInit() {
				console.log(this.userInfo)
				const params = {
					physicianId: this.userInfo.userId
				}
				const {code,data} = await this.$apis.postApi('/physician/getById',params)
				this.isLoad = true
				if(code==200){
					// this.login(data)
					if(data != null){
						this.form = data
						this.form.nickName = data.nickName|| this.userInfo.nickName
						this.isAwait = data.activated
						if(this.isAwait==3){
							this.failureReason = data.failureReason
						}
					}
					
				}
			},
			openReason(){
				console.log(122)
				let _this = this
				wx.showModal({
					title: '拒绝原因',
					content: this.failureReason||'不通过',
					showCancel:false,
					confirmText:'重新申请',
					success(res) {
						if (res.confirm) {
							_this.isAwait = 0
						}
					}
				})
			},
			navTo(url){
				uni.switchTab({url})
			},
			getImgTx($event){
        this.userIcon = $event[0].src
      },
			getImg($event,type){
        this.form[type] = $event[0].src
      },
			 //选择生日
			 bindDateChange(e) {
				this.$set(this.form,'birthday',e.detail.value)
			},
			openUserInfo(title,name){
				this.popData = {
					isShow: true,
					title:'修改'+title,
					name:name
				}
			},
			formSubmit(){
				//this.form.physicianId = this.userInfo.userId
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

				console.log("this.form  ===" + JSON.stringify(this.form ))

				const {
					gender,
					birthday,
					realName,
					identificationCard,
					identificationFront,
					identificationBehind,
					profile} = this.form
				if(!gender) {
					this.$api.msg('请选择性别')
					return
				} if(!birthday) {
					this.$api.msg('请选择出生日期')
					return
				} else if(!realName) {
					this.$api.msg('姓名不能为空')
					return
				} else if (!identificationCard) {
					this.$api.msg('身份证号不能为空')
					return
				} else if (!reg.test(identificationCard)) {
					this.$api.msg('身份证号不合法')
					return
				} else if (!(identificationFront&&identificationBehind)) {
					this.$api.msg('请上传照片')
					return
				} else if (!profile) {
					this.$api.msg('简介不能为空')
					return
				}
				this.$apis.postApi('/physician/add',this.form).then(({code,message}) => {
					if(code==200){
						this.isAwait = 1
						this.$api.msg('提交成功')
					} else {
						this.$api.msg(message)
					}
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
.container{
	.pop-box{
		.btn-pop{
			width: 420upx;
		}
		.uploadImg{
			margin: 50upx auto 0;
			width: 200upx;
		}
		.row{
			margin-top: 40upx;
			display: flex;
			align-items: center;
		}
		.input{
			flex:1;
			background: #F6F9FF;
			border-radius: 16upx;
			text-align: left;
			box-sizing: border-box;
			padding: 20upx 24upx;
			min-height: 100upx;
			&.textarea{
				height: 160upx;
			}
		}
	}
	.btn-link{
		height: 88upx;
		margin: 80upx 20upx 48upx;
	}
}
.form{
	padding: 0 24upx;
	margin: 20upx;
	background: #fff;
	display: block;
	overflow: hidden;
	box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(218,229,249,0.49);
	border-radius: 16rpx;
	.radio-group {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.cash-item{
			display: flex;
			align-items: center;
			margin-left: 70rpx;
		}
		.radio {
			transform: scale(0.8);
		}
	}
	.btn-link{
		height: 88upx;
		margin: 80upx 0 48upx;
	}
	.uploadImg2{
		display: flex;
		.card{
			width: 320upx;
			height: 202upx;
			border-radius: 8upx;
		}
		.flex{
			flex: 1;
		}
	}
	.row{
		padding:20upx 0;
		min-height: 90upx;
		background: #fff;
		display: flex;
		justify-content: center;
		position: relative;
		align-items: center;
		.title{
			font-size: 34upx;
			color: #000000;
			font-weight: 400;
			width: 130upx;
			white-space: nowrap;
		}
		.select{
			display: flex;
			align-items: center;
		}
		.cont{
			position: relative;
			text-align: right;
			flex: 1;
			.img{
				width: 90rpx;
				height: 90rpx;
			}
			.tit{
				font-size: 34upx;
				margin-bottom: 15upx;
				text-align: left;
			}
			textarea{
				font-size: 34upx;
				text-align: left;
				background: #F6F9FF;
				border-radius: 16upx;
				padding: 20upx;
				width: 100%;
				box-sizing: border-box;
			}
		}
		.cell-more{
			align-self: center;
			font-size:30upx;
			color:#000;
			margin-left:14upx;
			padding-top: 2upx;
		}
		.uni-input{
			width: 100%;
			font-size: 34upx;
		}
		.input{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			input{
				font-size: 34rpx;
				width: 80%;
				text-align: right;
			}
		}
	}
	.upload-box{
		.title{
			margin: 40upx 0 20upx;
			font-size: 34upx;
		}
	}
	.selectList{
		background: #F6F9FF;
		border-radius: 16upx;
		padding: 20upx 26upx;
		margin-top: 30upx;
		.item{
			font-size: 28upx;
			color: #666;
			height: 80upx;
			display: flex;
			align-items: center;
			&.callFee{
				padding-right: 80upx;
			}
			.name {
				flex:1;
				font-size:34upx;
			}
			.price {
				width: 250upx;
				text-align: right;
			}
			
			.icon-delete{
				color: #666;
				width: 80upx;
				text-align: right;
				font-size: 28upx;
			}
		}
	}
	/deep/{
		.upload-content{
			.upload-add-btn,.upload-item{
				width: 320upx;
				height: 202upx;
			}
		}
	}
}
</style>
